<template>
  <div>
    <!-- 分页 -->
    <el-pagination class="page" small layout="total, prev, pager, next, jumper" :total="datas.length" :page-size="pageSize"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"  :current-page.sync="currentPage">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ['datas'],
  data() {
    return {
      //分页
      pageSize: 10,
      currentPage: 1,
    }
  },

  //在组件更新之前被调用
  beforeUpdate(){
    this.handleCurrentChange(this.currentPage);
  },

  computed: {
    // 分页计算
    displayedItems() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.datas.slice(startIndex, endIndex);
    },

  },
  methods: {
    //分页
    handleCurrentChange(page) {
      this.currentPage = page;
      this.$emit('pageChange', this.displayedItems)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
  },


}
</script>

<style scoped>
.page {
  width: 100%;
  text-align: end;
  padding: 15px;
}
</style>
